Copyright: Helpfile Generated by VB HelpWriter!


Contents

Introduction

Backgrounds

Images (graphics / pictures)

Types of anchors

Text Formats

Lists

Tables

Forms

Summary and where to get a lot more information

Achors Aweigh!, the associated tutorials and all documentation:

Copyright (c) 1996 Steven T. Fricke

Helpfile generated by VB HelpWriter.


Introduction

Many of the topics covered in the following tutorial allow you to understand the markup that Anchors Aweigh! handles for you. This empowers you to do special markup after Anchors Aweigh! performs basic markup for you.

OK, so now you have made a page, and you want to do all that cool stuff people are doing out there. I understand that completely. Most people do. As you forge ahead and learn how to do all those cool things, be careful. Too much of a good thing can be really distracting. Make these features work FOR you, not against you.

Keep in mind that people are going to be viewing your page. Not just you. That is the whole point of the World Wide Web, Isn't it?  With this in mind, make the page look and act the way you think people  who you plan to sign on to your site will want to see it.  Loud backgrounds and lots of fancy graphics might be great on a personal page, but might turn potential customers away on a business page.

Too many graphics or graphics that are  too large can bring the loading of your site to a snails crawl. If you have a large graphic to display, perhaps it might be better to make a small version (usually called a thumbnail) and include that. You could then make clicking that graphic display the larger version.

It also doesn't appear that people like to scroll down very long pages. Even if you grab someone's attention and have all that information they are looking for in one page, they will only scan down a few pages before they realize there is more there than they care to read right now (After all, they are "surfing"!). If you do want to make a page long, that is fine, but don't just dump the stuff out there. Organise your page. At the top, put in a links to different parts of your page and call those parts of the page from the top of that page... or from another page all together. That way they can see exactly what they want to see. Of course, another way to resolve this is: If you have different types of information on the page, perhaps it's time to make a different page for each topic.

All in all, good page design boils these points:

Design with your potential viewers in mind.

There is no substitute for good planning

Keep the pages small and informative

Graphics are good, but use them wisely

Lastly, I want to point out that this is not a tutorial for HTML purists. This tutorial will cover many Netscape extensions that are so widely used I would be remiss if I were to not include them.

Helpfile generated by VB HelpWriter.


Backgrounds

Before moving on with backgrounds, be aware that only some browsers allow background colors and/or images. Don't assume that everybody is going to see  the page the way you do. Luckily, as with all other tags. If the browser can't read them, they just ignore what you wrote. No harm done.

Backgrounds can really add a lot to your page. They set tones and moods and, at a glance, give a good idea of what type of page it is. There are really three ways you can handle a background:

Set the background color

Set a background image

Both of the above

Color:

Setting the background colors and image is performed at the top of your page in the <BODY> tag.

After the word BODY in the tag, add the tag BGCOLOR... then a cryptic computer code that represents a color (you really don't want to know how they come up with the code, do you?) All you need to know is how to make it the color you want. There are several ways to do that. one is with a chart that you might find in a magazine or a book, another is to look for pages that have the color you want, another is to find pages on the internet that may help you determine those colors (Yes, they do exist), but for you, the easiest way is built right into Anchors Aweigh!:

Click the background button and then use the color buttons to select the color you want just by clicking on it. Simple, huh.

While you are there you can also set the color of the different text. There is more on that in the text area of this tutorial.

For the sake of this tutorial, we are going to make the code: "#FFC080" (I told you it was cryptic!)

Load your tutorial page, and include the BGCOLOR="#FFC080" right after the word BODY in the <BODY> tag.

Your line should now look like this:

<BODY BGCOLOR="#FFC080">

Helpfile generated by VB HelpWriter.


Images

From Anchors Aweigh! simply click the [Image] button and browse for your image. That will do this markup for you!

OK, so you want an image, too? All you need to do is add a background call in the <BODY> tag. For this tutorial, we will use the image: BKG.JPG Add this term:

BACKGROUND="BKG.JPG"

So....

Now your tag should look something like this:

<BODY BGCOLOR="#FFC080" BACKGROUND="BKG.JPG">

Just so you know; It really does not matter where the optional statements go in this line. This includes the text color statements covered  later. Therefore, the following two lines will be interpreted the same.

<BODY BGCOLOR="#FFC080" BACKGROUND="BKG.JPG">

<BODY BACKGROUND="BKG.JPG" BGCOLOR="#FFC080">

Helpfile generated by VB HelpWriter.


Anchors

A link is called an anchor. There are different types of anchors that you can add to your page. The most popular are:

Anchors to other pages

Anchors to open E-Mail reply forms

Anchors to download files such as ZIP files, WAV sounds, etc.

Anchors to specific locations on a page

These are all handled essentially the same. We covered the basic markup in the first tutorial:

<A HREF="http://www.why.net/home/sfricke">STF Home Page</A>

This loads my homepage. I have a page there I named INDEX.HTML and when you go there, it will load.

To add a page that is in the same area, you do not need to call out the whole URL, just the page. To call my DOWNLOAD.HTML page, all I have to do is include a line like this to my INDEX.HTML:

<A HREF="download.html">See my download page</A>

Adding a file download is done just the same:

<A HREF="anchors.zip">Download Anchors Aweigh!</A>

If this were being called from another location, then the full path will need to be included:

<A HREF="ftp://ftp.why.net/users/srficke/anchors.zip">Download Anchors Aweigh!</A>

To add an E-Mail anchor:

<A HREF="mailto:sfricke@why.net">sfricke@why.net</a>

To add an Anchor to a Usenet Newsgroup:

<A HREF="news:rec.rollercoaster">rec.rollercoaster</a>

To anchor to a specific point on a page you will need two things. You anchor, and a NAME to call. First specify a place on the page to call. We will use an area we will call the "Hot Links" area.

Immediately above the part of the page we want o the very top, create a name for that location. We will call it "HotLink". We will put this markup at that point:

<A NAME="HotLink"></a>

When we want to call that NAME, specify it with a # symbol:

<A HREF="#HotLink">Hot Links Area</A>

To call this point form  another site, use the full URL:

<A HREF="http://www.why.net/home/sfricke/download#HotLink">Hot Links Area</A>

Now... how about using an image as the thing to click? No problem! Let's use the HOME1.JPG file included with this software. Al you do is add the graphic markup as described in the first tutorial:

<A HREF="index.html"> <IMG SRC="home1.jpg" > </a>

One more thing you might want to add. This is in no way required, but some people prefer it If you include the markup "BORDER=0 then it will not show a box around the picture. This is particularly nice if you use images with transparent backgrounds:

<A HREF="index.html"> <IMG SRC="home1.jpg" BORDER=0 > </a>

Helpfile generated by VB HelpWriter.


Text Formats

Changing the appearance of you text is a critical part of your page. Much like on a word processor, the appearance of your text does a great deal for helping top express your point. The first tutorial covered Bold and Italic. There are other things you can do to your text which you may find useful.

To change the size of your text you may want to do one of two things, both of which are very similar, but are normally used for different reasons.

First is the Header tag <Hx> and </Hx> This allows you to make text bigger that normal and be displayed as a header. Normally this is displayed in bold text. The "x" in the <Hx> is a number from 1 and 6 where 1 is the biggest, 6 is the smallest. This is normally used to markup area titles.

For an example of various test files, try loading veiwing the FONTS.HTM file included with this software using your WWW browser

Example:

<H1>My Home Page</H1>

Next is the <FONT SIZE=x> and the </FONT> tags. The "x" in the markup <FONT SIZE=x> is a number from 1 to 7 where 1 is the smallest, and 7 is the biggest. This is normally used  on standard body text.

Example

<FONT SIZE=1>This is something I want to say, but I really don't want to be that loud about it</FONT>

<BLINK>

Yes you can make text blink. You use the <BLINK> and </BLINK> tags. I have used this myself. When you really want to catch attentions, this will do it. It also can be really annoying. If you do use it, use it wisely. I once saw an entire page that blinked. That was a perfect example of too much of a good thing!

<CENTER>

You can center text on the screen with the tag <CENTER> and </CENTER>... 'Nuff said.

Now we come to the colors. Yes we are back to those cryptic codes we discussed in the backgrounds section. You may change the color of your text using these codes.

The different add in markups are:

TEXT=hexcode

LINK=hexcode

ALINK=hexcode

VLINK=hexcode

In the above statements, the "hexcode" is to be replaced with one of the computer color codes.

TEXT will change the color of your body text.

LINK will change the color of the anchor text

ALINK will change the color of an active link

VLINK will change the color of a link that has already been visited.

Using these should look something like below:

<BODY TEXT="#000000" LINK="#FF0000" ALINK="#FF8000" VLINK="#FF00FF">

These codes can be included in your <BODY> tag in any order after the word BODY.

These codes can be automticly inserted in your document if you use the Background button in Anchors Aweigh! and click on the colors you want (This is the easiest way!).

<PRE>

Pre-formatted text will display EXACTLY as it is written. It normally uses a courier font. This eliminates the need to enter hard line breaks like <BR> and you can space over exactly as you want it displayed, but that comes at a cost. All other tags are ignored between <PRE> and </PRE>

Example:

<PRE>

This is sample code.

This will display with the new lines and spaces.

This would be a space:           See the space!

</PRE>

<BLOCKQUOTE>

This displays text as if it came form another source.  Usually indented on both sides.

<BLOCKQUOTE>

This would display as a quote from some person or business

</BLOCKQUOTE>

Helpfile generated by VB HelpWriter.


Lists

There are 3 different types of lists:

Unordered (Bullets at the front of each line)

Ordered (Numbers at the front of each line)

Definitions.

Unordered List:

To make an Unordered list (bullets), place the enter the tag <UL> before any of the text.

Enter a <LI> before any of the items in the list

Enter a </UL> at the end of the list.

Example:

<UL>

<LI>This is entry number one

<LI>This is entry number two

<LI>This is entry number three

</UL>

This would display something like this:

This is entry number one

This is entry number two

This is entry number three

Ordered List:

To make an Ordered list (numbered), do the same as the above, but use <OL> and </OL> tags instead of the <UL> and </UL> tags.

Example:

<OL>

<LI>This is entry number one

<LI>This is entry number two

<LI>This is entry number three

</OL>

This would display something like this:

1  This is entry number one

2  This is entry number two

3  This is entry number three

Definition List:

To make a definition list, you must also identify what is the term, and what is the definition. Place a <DL> at the beginning of the list. The term you want to identify will need to start with a <DT> tag. The actual definition will need to start with a <DD> tag. Once these are all entered, close the list with a </DL>

Example:

<DL>

<DT>Beach Boys, The

<DD>The Beach Boys defined a music phenomena in the mid to late 1960's called "Beach Music" This was most popular on th west coast of the United States.

<DT>Beatles, The

<DD>The Beatles redefined popular music in the 1960s. Their unique style of dress and music created a hysteria in the music industry that has ultimately come to be called "Beatlmania".

</DL>

This would display something like this:

Beach Boys, The

The Beach Boys defined a music phenomena in the mid to late 1960's called "Beach Music" This was most popular on th west coast of the United States.

Beatles, The

The Beatles redefined popular music in the 1960s. Their unique style of dress and music created a hysteria in the music industry that has ultimately come to be called "Beatlmania".

Helpfile generated by VB HelpWriter.


Special Characters

Special characters like the copyright symbol, the trademark symbol, etc. can be inserted in your document. Each one has a special code, but they all follow on rule: They all begin with "&#" and end in a 3 digit number. That number is determined by the numerical ANSI equivalent.

A copyright symbol is: &#169

Yeah, I know there is no way you are going to look that up. If you want to get an ANSI table and do them yourself, you can... but once again Anchors Aweigh! pulls through. All you need to do is select the symbol or character you want to display from the SPECIAL drop down list on the Anchors Aweigh toolbar and let the computer inter it for you.

Helpfile generated by VB HelpWriter.


Tables

For the easist possible way to design a table, select the [Table] button from Anchors Aweigh!. This will load a speard sheet look for you to enter your text. Don't worry about the markup, let Anchors Aweigh! do it for you!

A table is defined with the tag <TABLE> and closed with the </TABLE> tag.

Each  new line of a table must start with a <TR> tag.

A  table may have a header row. This header row will list a title for what information will be in the column under the title. This is done using the tag <TH>

Each place in a table where you want a new column of text is preceded by a <TD> entry.

That is as simple as it can be explained folks. The best way to learn it is to see it marked up:

<TABLE>

<TR><TH> header 1  <TH> header 2 <TH> header 3 <TH> header 4

<TR><TD> text 1       <TD> text 2       <TD> text 3     <TD> text 4

<TR><TD> text 1       <TD> text 2       <TD> text 3     <TD> text 4

<TR><TD> text 1       <TD> text 2       <TD> text 3     <TD> text 4

<TR><TD> text 1       <TD> text 2       <TD> text 3     <TD> text 4

</TABLE>

There is one draw back to the example above. It does NOT show a border. Most people want a border. To include a border grid, simply add the word BORDER after the word TABLE in the first tag.

Example:

<TABLE BORDER>

<TR><TH> header 1 <TH> header 2 <TH> header 3 <TH> header 4

<TR><TD> text 1       <TD> text 2       <TD> text 3     <TD> text 4

</TABLE>

Helpfile generated by VB HelpWriter.


Forms

In Anchors Aweigh! simply click the [Forms] button to display a floating toolbar with form commands.

Forms are fairly easy to make, they look great, but they require a little help. In order for a form to perform a function, it must have a program to perform that function. Somewhere on the Internet you must have access to a program which you can access to process your form. If you already have access to that (Such as to a guestbook program or a mail server program) then you are ready to go with a form so skip the next section.

If you don't all may not be lost.

Since the very nature of the Internet is a fluid environment, I can not be specific about free services on the Internet. They may be free today and not tomorrow. They may not be at the same URL tomorrow, and they  may not even be around tomorrow. At the time of the release of this software, there are servers which give free access to form programs in exchange for a little advertising. Every time one of the forms is processed, an ad pops up on the screen of the person who used your form. This is because companies are paying for the upkeep of that program. This is most likely not that bothersome to the person who used your form. most of us are used to advertising on the Internet.

How can you find one of these programs? You can search the Internet, or if my page is still at the same URL (remember the net IS fluid!) then stop by my page and I will make every effort to have information regarding servers on the Internet willing to process your forms. My URL is:

http://www.why.net/home/sfricke

If this still does not work you might consider mailing it to yourself without a program. The mail could be kind of cryptic and produce... unusual results, but it will work.

On with the show!

OK so how do we define a form? <FORM> and </FORM>.

After declaring the <FORM you must then define what the form will do. The choices are GET and POST. Most likely you are going to be using the POST method. While the default method is get, most  software requires you to post. It is fair to assume if you are not told otherwise that the method you will want to use is POST. This is defined <FORM METHOD="POST"

Now you need to define an action. This is where you put the program that will process your form or other action that you want. Lets say you have access to a CGI script (that what they call one of those programs) and the URL for that is:

"http://www.bigserver.net/cgi-bin/formserve.cgi"

That would be your action. Now your first tag should look like this:

<FORM METHOD="POST" ACTION="http://www.bigserver.net/cgi-bin/formserve.cgi">

Or if you have no access to a program, then try

<FORM METHOD="POST" ACTION="mailto:your email address">

Types of Inputs on a form:

Text

A single line of text can be entered.

You should include a maximum length and size with this input.

Textarea

Multiple line text.

You must define the number of rows and columns.

Checkbox

Either on or off. There may be more than one in the ON state per page.

Radio

Either on or off. You must have more than one on a page. There may  NOT be more than one in the ON state per page. This is handled by the browser, not you.

Select

A drop down list of items to choose from.

If the option of Multiple is used more than one item can be selected and (depending on your viewer) all the items will appear on an open list on the page rather than a drop down list..

Password

Single line input. Used for passwords, this will not echo the entered text back to the person entering the text. Usually this displays as a *

Submit

Button which tell the form to perform the action it was supposed to.

Reset

Clears all fields and returns them to their default state they were in when the form loaded

Helpfile generated by VB HelpWriter.


Summary

We now have many of the tools we need to not only make a WWW Page, but make an attractive WWW page. Remeber that there is no substitue for good planning.

For more information anout HTML, be sure to stop by my home page. I have a page on my site which is dedicated to making Anchors Aweigh! work for you. I have links to free resources on the interenet which can make your pages easier to create and more attractive one you are there. I will only include sites I believe are of the highest quality and pertinent to HTML development using Anchors Aweigh! At present there are links to Form Handling sites, Counter Sites, Graphics Sites including a link to Jay Olive's page (This is the gentleman who created all the graphics for Anchors Aweigh!). There are even sites for more information on HTML iteslf. These sites would be included here, but since the WWW is a fluid environment, I thought it best to give you a home base to work from with links that are current and information that is up to date.

My homepage:

http://www.why.net/home/sfricke

Helpfile generated by VB HelpWriter.